<template>
  <div id="app">
    <h2 id="h2">基本使用</h2>
    <button id="btn1" @click="axiosGet">发送GET请求</button>
    <button id="btn2" @click="axiosNoGet">取消GET请求</button>
  </div>
</template>

<script>
import axios from "axios";
//声明一个全局变量
let cancel=null;

export default {
  name: 'App',
  methods:{
    //发送请求
    axiosGet:function(){
      //检测上一次的请求是否已经完成（可以通过cancel的值来判断）
      //如果axios的请求已经发出，但是没有响应完成，那么cancel的值就仍然是形参c的值
      //如果响应完成，那么cancel的值就会是null
      if(cancel !== null)
      {
        //如果请求还在执行，在此同时又执行了新的相同的请求，就可以通过此部分来取消上一次的请求
        cancel();
      }

      axios({
        method:"GET",
        url:"http://localhost:3000/posts",
        //1.添加配置对象的属性
        cancelToken:new axios.CancelToken(function(c){
          //存在一个形参，定义c来接收形参
          console.log("c",c);
          //将接收的形参赋值给cancel 
          cancel=c;
          console.log("cancel",cancel)
        })
      }).then(
        response=>{
          console.log("response",response.data);
          //调整cancel的值得动态变化
          //当请求完成后，就将cancel的值重置为null
          cancel =null;
        },
        error=>{
          console.log("error",error.message);
        }
      );
    },
    //取消请求
    axiosNoGet:function(){
      //由于请求的json-server服务器在本地，响应时间非常短，为了保证取消请求能成功，需要给json-server添加一个延迟响应
      //这样就可以在NetWork里看到取消请求的效果了
      cancel();
    }
  }  
}
</script>

<style>
  button{
    margin-left: 5px;
  }
  #btn1{
    background-color: skyblue;
  }
  #btn2{
    background-color: orange;
  }
</style>
